<template>
  <a-spin :spinning="loading">
    <div v-if="taskDueDateSetting">
      【{{targetActivityName}}】{{$t('m.bpm.design.due_date_pre_tips')}}{{dueDateString}}，{{$t('m.bpm.design.due_date_after_tips')}}：
      <a-date-picker
        @change="onDueDateChange"
        :allowClear="false"
        format="YYYY-MM-DD HH:mm:ss"
        :defaultValue="moment(dueDate)"
        :showTime="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }"
      />
    </div>
    <a-row>
      <a-col :span="16">
        <a-tabs size="small">
          <a-tabPane v-if="userTab.show" key="user" :tab="$t('m.bpm.design.select_user_tab_name_user')">
            <!--<a-row :gutter="24">-->
              <!--<a-col :md="12" :sm="24">-->
                <!--<a-input-search placeholder="请输入姓名查询1" v-model="inputValue" enter-button @search="searchUsersByKey"/>-->
              <!--</a-col>-->
              <!--<a-col :md="12" :sm="24">-->
              <!--</a-col>-->
            <!--</a-row>-->
            <a-input-search :placeholder="$t('m.bpm.design.select_user_search_usernameorworkno_placeholder')" v-model.trim="inputValue" enter-button @search="searchUsersByKey" style="width:80%;margin-left:40px;"/>
            <select-user-table v-model="selectUsers" :isRadio="isRadio"
                               :height="height"
                               :userDataSource="userTab.dataSource"></select-user-table>
          </a-tabPane>
          <a-tabPane v-if="deptTab.show" key="dept" :tab="$t('m.bpm.design.select_user_tab_name_dept')">
            <!--<a-row :gutter="24">-->
              <!--<a-col :md="12" :sm="24">-->
                <!--<a-input-search placeholder="请输入姓名查询" v-model="inputValue" enter-button @search="searchDeptUserByKey"/>-->
              <!--</a-col>-->
              <!--<a-col :md="12" :sm="24">-->
              <!--</a-col>-->
            <!--</a-row>-->
            <a-row >
              <a-col :span="8">
                  <left-tree type="dept" v-model="deptTab.currDeptId" :expandedKeys="deptTab.expandedKeys"
                             :height="height"
                             :treeDataSource="deptTab.treeDataSource"/>
              </a-col>
              <a-col :span="16">
                  <a-input-search :placeholder="$t('m.bpm.design.select_user_search_usernameorworkno_placeholder')" v-model.trim="inputValue" enter-button @search="searchDeptUserByKey" style="width:80%;margin-left:30px;"/>
                  <right-user-list ref="deptUserList" v-model="selectUsers" :deptSearchKey="deptTab.deptSearchKey"
                                   :conditionIds="deptTab.searchDeptIds" :currentDeptId="deptTab.currDeptId"
                                   :height="height"
                                   @resetSearchKey="resetSearchKey" :isRadio="isRadio"/>
              </a-col>
            </a-row>
          </a-tabPane>
          <a-tabPane v-if="roleTab.show" key="role" :tab="$t('m.bpm.design.select_user_tab_name_role')">
            <!--<a-row :gutter="24">-->
              <!--<a-col :md="12" :sm="24">-->
                <!--<a-input-search placeholder="请输入姓名查询3" v-model="inputValue" enter-button @search="searchRoleUserByKey"/>-->
              <!--</a-col>-->
              <!--<a-col :md="12" :sm="24">-->
              <!--</a-col>-->
            <!--</a-row>-->
            <a-row>
              <a-col :span="8">
                <left-tree v-model="roleTab.currRoleId" :height="height" :treeDataSource="roleTab.treeDataSource"/>
              </a-col>
              <a-col :span="16">
                <a-input-search :placeholder="$t('m.bpm.design.select_user_search_usernameorworkno_placeholder')" v-model.trim="inputValue" enter-button @search="searchRoleUserByKey" style="width:80%;margin-left:30px;"/>
                <right-user-list ref="roleUserList" v-model="selectUsers" :currentRoleId="roleTab.currRoleId"
                                 :conditionIds="roleTab.searchRoleIds" @resetSearchKey="resetSearchKey"
                                 :height="height"
                                 :isRadio="isRadio"/>
              </a-col>
            </a-row>
          </a-tabPane>
          <a-tabPane v-if="positionTab.show" key="position" :tab="$t('m.bpm.design.select_user_tab_name_position')">
            <!--<a-row :gutter="24">-->
              <!--<a-col :md="12" :sm="24">-->
                <!--<a-input-search placeholder="请输入姓名查询4" v-model="inputValue" enter-button @search="searchPositionUserByKey"/>-->
              <!--</a-col>-->
              <!--<a-col :md="12" :sm="24">-->
              <!--</a-col>-->
            <!--</a-row>-->
            <a-row>
              <a-col :span="8">
                <left-tree v-model="positionTab.currPositionId" :height="height" :treeDataSource="positionTab.treeDataSource"/>
              </a-col>
              <a-col :span="16">
                <a-input-search :placeholder="$t('m.bpm.design.select_user_search_usernameorworkno_placeholder')" v-model.trim="inputValue" enter-button @search="searchPositionUserByKey" style="width:80%;margin-left:30px;"/>
                <right-user-list ref="positionUserList" v-model="selectUsers"
                                 :currentPositionId="positionTab.currPositionId"
                                 :isRadio="isRadio" :conditionIds="positionTab.searchPositionIds"
                                 :height="height"
                                 @resetSearchKey="resetSearchKey"></right-user-list>
              </a-col>
            </a-row>
          </a-tabPane>
        </a-tabs>
      </a-col>
      <a-col :span="8">
        <selected-area v-model="selectUsers" :filterUserSet="filterUserSet" :height="height"/>
      </a-col>
    </a-row>
  </a-spin>
</template>

<script>

  import moment from 'moment'
  import { getAction } from '@/api/manage'
  import SelectedArea from './SelectedArea'
  import LeftTree from './LeftTree'
  import RightUserList from './RightUserList'
  import SelectUserTable from './SelectUserTable'
  import YchConstant from "@/api/YchConstant";

  export default {
    name: 'BpmSelectUserData',
    components: {
      SelectedArea,
      LeftTree,
      RightUserList,
      SelectUserTable
    },
    props: {
      taskId: {
        type: String,
        default: null
      },
      operateType: {
        type: String,
        default: null
      },
      transitionId: {
        type: String,
        default: null
      },
      targetActivityId: {
        type: String,
        default: null
      },
      targetActivityName: {
        type: String,
        default: null
      },
      autoSelectUser: {
        type: Boolean,
        default: false
      },
      getActorsUrl: {
        type: String,
        default: null
      },
      height: {
        type: Number,
        default: 300
      },
    },
    data () {
      return {
        url: {
          getActors: this.getActorsUrl || YchConstant.PREFIX_BPM + '/bpm-front/displayRest/getActors/v1',
          getDeptTree: YchConstant.PREFIX_BPM + '/bpm-front/displayRest/getDeptTreeByDeptIds/v1'
        },
        loading: false,
        dueDateString: null,
        dueDate: null,
        taskDueDateSetting: false,
        isRadio: false,
        searchKey: '',
        inputValue: '',
        userTab: {
          show: false,
          dataSource: [],
          initDataSource: []
        },
        deptTab: {
          show: false,
          treeDataSource: [],
          currDeptId: null,
          searchDeptIds: '',
          expandedKeys: [],
          deptSearchKey: null
        },
        roleTab: {
          show: false,
          treeDataSource: [],
          currRoleId: null,
          searchRoleIds: ''
        },
        positionTab: {
          show: false,
          treeDataSource: [],
          currPositionId: null,
          searchPositionIds: ''
        },
        selectUsers: [],
        filterUserSet: []
      }
    },
    methods: {
      moment,
      load () {
        this.loading = true
        getAction(this.url.getActors, {
          taskId: this.taskId,
          targetActivityId: this.targetActivityId,
          operateType: this.operateType,
          autoSelectUser: this.autoSelectUser
        }).then((res) => {
          if (res.success) {
            this.init(res.result)
          } else {
            this.messageUtil.warning(res.message)
          }
        }).finally(() => {
          this.loading = false
        })
      },
      getDeptTree (deptIds) {
        this.loading = true
        getAction(this.url.getDeptTree, {
          deptIds: deptIds
        }).then((res) => {
          if (res.success) {
            this.deptTab.treeDataSource = res.result
            if (res.result.length > 0) {
              this.deptTab.expandedKeys = res.result.map(item => item.key)
              this.deptTab.currDeptId = res.result[0].key
            } else {
              this.deptTab.expandedKeys = []
            }
          } else {
            this.messageUtil.warning(res.message)
          }
        }).finally(() => {
          this.loading = false
          this.deptTab.show = true
        })
      },
      init (actorArray) {
        this.dueDateString = actorArray.dueDateString
        this.dueDate = actorArray.dueDate
        this.taskDueDateSetting = actorArray.taskDueDateSetting
        this.isRadio = actorArray.radio
        if (actorArray.users.length > 0) {
          this.userTab.dataSource = actorArray.users
          this.userTab.initDataSource = actorArray.users
          this.userTab.show = true
        }
        if (actorArray.depts.length > 0) {
          const deptArr = actorArray.depts.map(item => {
            return item.id
          })
          this.deptTab.searchDeptIds = deptArr.join(',')
          this.getDeptTree(this.deptTab.searchDeptIds)
        }
        if (actorArray.roles.length > 0) {
          const tree = actorArray.roles.map(item => {
            return {
              key: item.id,
              title: item.name
            }
          })
          const roleArr = actorArray.roles.map(item => {
            return item.id
          })
          this.roleTab.searchRoleIds = roleArr.join(',')
          this.roleTab.treeDataSource = tree
          this.roleTab.currRoleId = actorArray.roles[0].id
          this.roleTab.show = true
        }
        if (actorArray.positions.length > 0) {
          const tree = actorArray.positions.map(item => {
            return {
              key: item.id,
              title: item.name
            }
          })
          const positionArr = actorArray.positions.map(item => {
            return item.id
          })
          this.positionTab.searchPositionIds = positionArr.join(',')
          this.positionTab.treeDataSource = tree
          this.positionTab.currPositionId = actorArray.positions[0].id
          this.positionTab.show = true
        }
        if (this.autoSelectUser) {
          const autoSelectUserList = actorArray.autoSelectUserList
          if (autoSelectUserList && autoSelectUserList.length > 0) {
            this.selectUsers = autoSelectUserList
          }
        }

        this.filterUserSet = actorArray.filterUserSet || []
      },
      onDueDateChange (dueDate) {
        this.$emit('changeDueDate', dueDate, this.transitionId)
      },
      searchDeptUserByKey (searchKey) {
        this.deptTab.currDeptId = null
        this.$refs.deptUserList.searchDeptUserByKey(searchKey)
      },
      resetSearchKey () {
        this.inputValue = null
      },
      searchRoleUserByKey (searchKey) {
        this.roleTab.currRoleId = null
        this.$refs.roleUserList.searchRoleUserByKey(searchKey)

      },
      searchPositionUserByKey (searchKey) {
        this.positionTab.currPositionId = null
        this.$refs.positionUserList.searchPositionUserByKey(searchKey)
      },
      searchUsersByKey (searchKey) {
        let userList = []
        //深拷贝，避免数据被覆盖
        this.userTab.initDataSource.map(item => {
          let newObj = Object.assign({}, item);
          userList.push(newObj);
        });
        if (searchKey != '') {
          this.userTab.dataSource = userList.filter(item => (item.name.indexOf(searchKey) > -1 ||  item.workNo.indexOf(searchKey) > -1 ))
        } else {
          this.userTab.dataSource = userList
        }
      }
    },
    watch: {
      selectUsers: {
        immediate: true,
        handler (value) {
          const data = value.map(item => item.userKey)
          this.$emit('changeSelectUser', data, this.transitionId, this.filterUserSet)
        }
      }
    },
    created () {
      this.load()
    }
  }
</script>
